<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="/tld/extremecomponents" prefix="ec" %>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>eXtremeTest</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/extremetable/new/extremecomponents.css"/>
</head>

<% java.util.List presidents = new java.util.ArrayList(); %>

<% java.util.Map president = new java.util.HashMap(); %>
<% president.put("name", "乔治 华盛顿"); %>
<% president.put("nickname", "美国国父"); %>
<% president.put("term", "1789-1797"); %>
<% presidents.add(president); %>

<% president = new java.util.HashMap(); %>
<% president.put("name", "约翰 亚当斯"); %>
<% president.put("nickname", "Atlas of Independence"); %>
<% president.put("term", "1797-1801"); %>
<% presidents.add(president); %>

<% president = new java.util.HashMap(); %>
<% president.put("name", "Thomas Jefferson"); %>
<% president.put("nickname", "Man of the People, Sage of Monticello"); %>
<% president.put("term", "1801-09"); %>
<% presidents.add(president); %>

<% president = new java.util.HashMap(); %>
<% president.put("name", "James Madison"); %>
<% president.put("nickname", "Father of the Constitution"); %>
<% president.put("term", "1809-17"); %>
<% presidents.add(president); %>

<% president = new java.util.HashMap(); %>
<% president.put("name", "James Monroe"); %>
<% president.put("nickname", "The Last Cocked Hat, Era-of-Good-Feelings President"); %>
<% president.put("term", "1817-25"); %>
<% presidents.add(president); %>

<% president = new java.util.HashMap(); %>
<% president.put("name", "John Adams"); %>
<% president.put("nickname", "Old Man Eloquent"); %>
<% president.put("term", "1825-29"); %>
<% presidents.add(president); %>

<% request.setAttribute("pres", presidents); %>
<% request.setAttribute("totalRows", new Integer(""+presidents.size())); %>

<body style="margin:25px;">
	
	<p style="font-family: Verdana;font-size:14px;">
		Congratulations!! You have successfully configured eXtremeTable!
	</p>
	
	<br>

	<ec:tableEx
		items="pres"
		var="pres"
		
		title="Presidents"
		width="60%"
		rowsDisplayed="5"
		paginationLocation="both"
		showRowsDisplayed="false"
		showGotoPages="true"
		showStatusBar = "false"
		filterable="false"
		>
		<ec:exportXls
			fileName="总统花名册.xls"
			tooltip="导出Excel"/>
		<ec:exportPdf
			fileName="总统花名册.pdf"
			tooltip="导出PDF" 
			headerColor="black" 
			headerBackgroundColor="#b6c2da" 
			headerTitle="总统花名册"   />
		<ec:row highlightRow="true">
			<ec:column property="name" title="姓名">${pageScope.pres.name}</ec:column>
			<ec:column property="nickname" />
			<ec:column property="term"/>
			<ec:column property="1" title=" ">132</ec:column>
		</ec:row>
	</ec:tableEx>
	
	<br>

	<p style="font-family:Verdana;font-size:12px">
	
		Below is the code that generates the above display.	

	</p>

<pre class="bodyText" style="background-color:#eee;padding:2px;width:60%;font-family: Verdana;font-size:11px;">
	&lt;ec:table 
		items="pres"
		var="pres"

		title="Presidents"
		width="60%"
		rowsDisplayed="5"
		paginationLocation="down"
		showRowsDisplayed="true"
		showGotoPages="true"
		>
		&lt;ec:exportXls
			fileName="总统花名册.xls"
			tooltip="导出Excel"/>
		&lt;ec:exportPdf
			fileName="总统花名册.pdf"
			tooltip="导出PDF" 
			headerColor="black" 
			headerBackgroundColor="#b6c2da" 
			headerTitle="总统花名册" />
		&lt;ec:row highlightRow="false">
			&lt;ec:column property="name"title="姓名" highlight="true" onmouseover="this.style.cursor='pointer'"  onmouseout="this.style.cursor='default'" >${pageScope.pres.name}&lt;/ec:column>
			&lt;ec:column property="nickname"/>
			&lt;ec:column property="term"/>
		&lt;/ec:row>
	&lt;/ec:table>
</pre>	

	<br>
	
	<p style="font-family:Verdana;font-size:11px;width:500px">
		Note: if you are not seeing any images then be sure to include the images included with the distribution. 
		This example assumes that the images are in an /images/table/ directory. You can see this by looking at the
		imagePath attribute on the eXtremeTable example. If your images are somewhere else then just adjust the 
		imagePath.
	</p>

	</body>
</html>